<template>
    <div v-transfer-dom>
      <x-dialog v-model="showHideOnBlur" class="dialog-demo" :hide-on-blur="false">
        <div class="alert-box">
            <div class="alert-box_header">
                <span class="alert-box_headerFont">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gantanhao-copy"></use>
                    </svg>
                </span>
                <p class="alert-box_headertext">系统提示</p>
            </div>
            <slot></slot>
            <div class="alert-box_button">
                <flexbox>
                    <flexbox-item>
                        <x-button type="primary" class="alert-box_buttonCancel"  :link="cancelLink" @click.native="register_alert_hide">取消</x-button>
                    </flexbox-item>
                    <flexbox-item>
                        <x-button type="primary" class="alert-box_buttonNext" :link="nextLink" @click.native="register_alert_hide">确定</x-button>
                    </flexbox-item>
                </flexbox>
            </div>
            
            
        </div>
      </x-dialog>
    </div>
</template>

<script>
import { XButton, XDialog, Flexbox, FlexboxItem, TransferDomDirective as TransferDom } from 'vux'
import { mapState, mapMutations } from 'vuex'
export default {
    name: 'CommonAlert',
    directives: {
        TransferDom
    },
    props: {
        cancelLink: String,
        nextLink: String,
        showHideOnBlur: {
            type: Boolean,
            default () {
                return false
            }
        }
    },
    components: {
        XDialog,
        XButton,
        Flexbox,
        FlexboxItem
    },
    data () {
        return {
            
        }
    },
    methods: {
        ...mapMutations([
            'register_alert_hide'
        ])
    }
}
</script>

<style lang="stylus" scoped>
.alert-box >>> .weui-dialog
    width: 100%
.alert-box
    width: 100%
    .alert-box_header
        width: 100%
        height: .75rem
        background-color: #ff721f
        color: #fff
        overflow: hidden
        position: relative
        .alert-box_headerFont
            position: absolute
            top: .13rem
            left: .2rem
        .alert-box_headertext
            height: 100%
            line-height: 0.75rem
            font-size: .3rem
    .alert-box_button
        padding: .2rem .3rem
        .alert-box_buttonCancel
            background-color: #ddd
        .alert-box_buttonNext
            background-color: #ff721f
</style>

